<template>
  <div class="digitalBi">
    <div class="digitalHeader">
      <div class="title">海通伟业数据BI大屏3</div>
      <div class="currenttime">{{ currentTime }}</div>
    </div>
    <!-- <div class="decoration">
      <dv-decoration-6
        :color="['#247fea']"
        style="width: 270px; height: 20px"
      />
      <dv-decoration-6
        :color="['#247fea']"
        style="width: 270px; height: 20px"
      />
    </div> -->
    <div class="digitalContent">
      <div class="digitalContenttop">
        <div class="digitalContenttopleft commont">
          <dv-border-box-10>
            <div class="commonTitle">收货工作量排行榜</div>
            <dv-scroll-ranking-board
              :config="config1"
              style="width: 85%; height: 85%; margin: 10px 0 0 70px"
            />
          </dv-border-box-10>
        </div>
        <div class="digitalContenttopright commont">
          <dv-border-box-10>
            <div class="commonTitle">录单工作量排行榜</div>
            <dv-scroll-ranking-board
              :config="config2"
              style="width: 85%; height: 85%; margin: 10px 0 0 70px"
            />
          </dv-border-box-10>
        </div>
      </div>
      <div class="digitalContentBottom">
        <div class="digitalContentbottomleft commonb">
          <dv-border-box-10>
            <div class="commonTitle">验收工作量排行榜</div>
            <dv-scroll-ranking-board
              :config="config3"
              style="width: 85%; height: 85%; margin: 10px 0 0 70px"
            />
          </dv-border-box-10>
        </div>
        <div class="digitalContentbottomright commonb">
          <dv-border-box-10>
            <div class="commonTitle">上架工作量排行榜</div>
            <dv-scroll-ranking-board
              :config="config4"
              style="width: 85%; height: 85%; margin: 10px 0 0 70px"
            />
          </dv-border-box-10>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listsreenTwo } from "@/api/system/receiveDigital";
export default {
  data() {
    return {
      currentTime: "",
      config1: {
        rowNum: 6,
        sort:false,
        waitTime: 2000,
        // itemStyle: {
        //   color: "#00d2d3",
        // },
        data: [],
        // unit: '条'
      },
      config2: {
        rowNum: 6,
        sort:false,
        waitTime: 1900,
        data: [],
        // unit: '条'
      },
      config3: {
        rowNum: 6,
        sort:false,
        waitTime: 3000,
        data: [],
        // unit: '条'
      },
      config4: {
        rowNum: 6,
        sort:false,
        waitTime: 2500,
        data: [],
        // unit: '条'
      },
    };
  },
  created() {
    this.getscreenlist();
    setInterval(() => {
      this.currentTime = this.getCurrentTime();
    }, 1000);
  },
  mounted() {},
  methods: {
    getscreenlist() {
      listsreenTwo({type:3}).then((res) => {
        console.log(res);
        this.config1.data = [];
        res.data.shRanking.map((item) => {
          this.config1.data.push({
            name: item.name,
            value: Number(item.tms)+'条/'+Number(item.js)+"件",
          });
          this.config1 = { ...this.config1 };
        });
        this.config2.data = [];
        res.data.ldRanking.map((item) => {
          this.config2.data.push({
            name: item.name,
            value: Number(item.tms)+'条/'+Number(item.js)+"件",
          });
          this.config2 = { ...this.config2 };
        });
        this.config3.data = [];
        res.data.ysRanking.map((item) => {
          this.config3.data.push({
            name: item.name,
            value: Number(item.tms)+'条/'+Number(item.js)+"件",
          });
          this.config3 = { ...this.config3 };
        });
        this.config4.data = [];
        res.data.sjRanking.map((item) => {
          this.config4.data.push({
            name: item.name,
            value: Number(item.tms)+'条/'+Number(item.js)+"件",
          });
          this.config4 = { ...this.config4 };
        });
      });
    },
    // 获取当天时间
    getCurrentTime() {
      const currentDate = new Date();
      const year = currentDate.getFullYear(); // 获取当前年份
      const month = currentDate.getMonth() + 1; // 获取当前月份（注意月份是从0开始计数的，需要加1）
      const day = currentDate.getDate(); // 获取当前日期
      const timePart = currentDate.toLocaleTimeString();
      const dateTimeString = `${year}/${month}/${day} ${timePart}`;
      return dateTimeString;
    },
  },
};
</script>
<style lang="scss" scoped>
.digitalBi {
  width: 100%;
  height: 1100px;
  // background: #070c3b;
  // background: #131a55;
  background: #000d58;
  .digitalHeader {
    position: relative;
    width: 100%;
    height: 70px;
    background: url("../../assets/images/receiveHeader2.png") center center
      no-repeat;
    background-size: 100%;
    text-align: center;
    color: rgb(255, 255, 255);
    .title {
      font-size: 36px;
      font-weight: 700;
      padding: 10px 0 0 0;
      letter-spacing: 5px;
    }
    .currenttime {
      position: absolute;
      font-size: 26px;
      font-weight: 700;
      right: 50px;
      top: 30px;
    }
  }
  .digitalContent {
    width: 100%;
    height: 1000px;
    padding: 0px 20px;
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    .digitalContenttop {
      height: 49%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .digitalContenttopleft {
        text-align: center;
        ::v-deep .dv-border-box-10 .border-box-content {
          padding: 2px 10px 10px 10px;
        }
        ::v-deep .dv-scroll-ranking-board {
          text-align: left;
          color: #8533fa;
          font-weight: 700;
        }
        ::v-deep .dv-scroll-ranking-board .ranking-column .inside-column {
          background: #00a8ff;
        }
        ::v-deep .dv-scroll-ranking-board .ranking-info {
          font-size: 25px;
        }
        ::v-deep .dv-scroll-ranking-board .ranking-info .rank {
          width: 80px;
          color: #8533fa;
        }
        .commonTitle {
          font-size: 30px;
          color: #ffffff;
          font-weight: 700;
          background: url("../../assets/images/digitalBititlef.png") center
            center no-repeat;
          background-size: 45% 150%;
        }
      }
      .digitalContenttopright {
        text-align: center;
        ::v-deep .dv-border-box-8 .border-box-content {
          padding: 2px 10px 10px 10px;
        }
        ::v-deep .dv-scroll-ranking-board {
          text-align: left;
          color: #4ffa67;
          font-weight: 700;
        }
        ::v-deep .dv-scroll-ranking-board .ranking-column .inside-column {
          background: #9c88ff;
        }
        ::v-deep .dv-scroll-ranking-board .ranking-info {
          font-size: 25px;
        }
        ::v-deep .dv-scroll-ranking-board .ranking-info .rank {
          width: 80px;
          color: #4ffa67;
        }
        .commonTitle {
          font-size: 30px;
          color: #ffffff;
          font-weight: 700;
          background: url("../../assets/images/digitalBititlef1.png") center
            center no-repeat;
          background-size: 45% 150%;
        }
      }
      .commont {
        height: 100%;
        width: 49%;
        // background: url("../../assets/images/digitalbg.png") center center
        //   no-repeat;
        // background-size: 89%;
      }
    }
    .digitalContentBottom {
      height: 49%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .digitalContentbottomleft {
        text-align: center;
        ::v-deep .dv-border-box-8 .border-box-content {
          padding: 2px 10px 10px 10px;
        }
        ::v-deep .dv-scroll-ranking-board {
          text-align: left;
          // color: #00d8d6;
          color: #ff8e1b;
          font-weight: 700;
        }
        ::v-deep .dv-scroll-ranking-board .ranking-column .inside-column {
          background: #26de81;
        }
        ::v-deep .dv-scroll-ranking-board .ranking-info {
          font-size: 25px;
        }
        ::v-deep .dv-scroll-ranking-board .ranking-info .rank {
          width: 80px;
          color: #ff8e1b;
        }
        .commonTitle {
          font-size: 30px;
          color: #ffffff;
          font-weight: 700;
          background: url("../../assets/images/digitalBititlef2.png") center
            center no-repeat;
          background-size: 45% 150%;
        }
      }
      .digitalContentbottomright {
        text-align: center;
        ::v-deep .dv-border-box-10 .border-box-content {
          padding: 2px 10px 10px 10px;
        }
        ::v-deep .dv-scroll-ranking-board {
          text-align: left;
          color: #0f8bfd;
          font-weight: 700;
        }
        ::v-deep .dv-scroll-ranking-board .ranking-column .inside-column {
          background: #18dcff;
        }
        ::v-deep .dv-scroll-ranking-board .ranking-info {
          font-size: 25px;
        }
        ::v-deep .dv-scroll-ranking-board .ranking-info .rank {
          width: 80px;
          color: #0f8bfd;
        }
        .commonTitle {
          font-size: 30px;
          color: #ffffff;
          font-weight: 700;
          background: url("../../assets/images/digitalBititlef3.png") center
            center no-repeat;
          background-size: 45% 170%;
        }
      }
      .commonb {
        height: 100%;
        width: 49%;
      }
    }
  }
}
</style>